<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载3D Tiles 数据</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Cesium.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
</head>

<body>
    <!-- 创建一个容器来显示3D场景 -->
    <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>

    <script>

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NjU4MWUxOC0xM2ZjLTQwMjMtYTZiOS1lYTA4ZDU2MDA2ODciLCJpZCI6MTU2OTYyLCJpYXQiOjE2OTA1MTM2ODl9.vQIHphFjgNl_B7_qAUPNnpAM2chYsgDgaNO2cLnhVTw';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            // 关闭无用控件
            globle: false
        });

        // 取消版权信息
        (viewer)._cesiumWidget._creditContainer.style.display = 'none';

        // 性能调优时用的
        // viewer.scene.debugShowFramesPerSecond = true;

        // 关闭相关特效 太阳，月亮，天空盒，雾等等
        viewer.scene.moon.show = false;
        viewer.scene.fog.enabled = false;
        viewer.scene.sun.show = false;
        viewer.scene.skyBox.show = false;

        // 调整画面精细度,默认值为1.0
        // viewer.resolutionScale = 0.9;

        const tileset = new Cesium.Cesium3DTileset({
            // 默认值16 用于提高细节细化级别的最大屏幕空间错误。这个值是用来x判断当前层级上的三维碎片是否显示的，值越大，显示的地物越少。
            maximumScreenSpaceError: 64,
            // prefix + uri组成预览的相对url
            url: 'http://localhost:5173/static/helongTest/tileset.json',
            debugColorizeTiles: true,
            // Determines if level of detail skipping should be applied during the traversal.
            skipLevelOfDetail: true,
        });

        // 获取当前日期的 00:00:00
        const startOfDay = moment().startOf('day');
        // 获取当前日期的 23:59:59
        const endOfDay = moment().endOf('day');
        let start = Cesium.JulianDate.fromIso8601(startOfDay.format('YYYY-MM-DDTHH:mm:ss.SSSZ'));
        // 同样的方法设置结束时间
        let end = Cesium.JulianDate.fromIso8601(endOfDay.format('YYYY-MM-DDTHH:mm:ss.SSSZ'));
        // 最后使用timeline的zoomTo方法将时间设置上去
        viewer.timeline.zoomTo(start, end);

        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset);

        // home键跳转到图层中心
        viewer.homeButton.viewModel.command.beforeExecute.addEventListener(e => {
            e.cancel = true;
            viewer.zoomTo(tileset);
        });
    </script>
</body>

</html>